<template>
    <div class='loading-page vertical-center dsfgdgdftr'>
        <img src="../../assets/img/loadbg.png" class="loading-left-img" />
        <div class="loading-centext ">
            <p class="fz22 b cen mt20">欢迎登录！</p>
            <n-form class="mt20" :model="formValue" ref="formRef" :rules="rules" label-width="80" :inline="false"
                size="normal">
                <n-form-item label="用户名" path="name">
                    <n-input v-model:value="formValue.name" type="text" placeholder="请输入用户名" size="medium" clearable
                        @keyup.enter="handleValidateClick">
                        <template #prefix>
                            <i class="iconfont dx-user"></i>
                        </template>
                    </n-input>
                </n-form-item>
                <n-form-item label="密码" path="paw" class="mt20">
                    <n-input v-model:value="formValue.paw" type="password" placeholder="请输入密码" size="medium" clearable
                        @keyup.enter="handleValidateClick">
                        <template #prefix>
                            <i class="iconfont dx-jiesuo"></i>
                        </template>
                    </n-input>
                </n-form-item>
            </n-form>
            <div class="mt20">
                <n-button type="primary" size="medium" class="w100" @click="handleValidateClick">登录</n-button>
                <p class="cen z9 fz12 mt10 pm20">
                    使用产品时,请尊重他们的隐私等权利
                </p>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import store from "../../store/index";
import { useRouter } from "vue-router";
import { dxpost, hf } from "../../util/index";
const { currentRoute } = useRouter();
const formRef = ref(null);
let loadingse = ref(false);
const qurl: any = currentRoute.value.query;
let formValue = ref({
    name: "",
    paw: "",
});
const rules = {
    name: {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
    },
    paw: {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    }
}
const loading = async () => {
    loadingse.value = true;
    const res: any = await dxpost("load", formValue.value);
    loadingse.value = false;
    if (res.errno == 0) {
        localStorage.token = res.data.token;
        localStorage.userNmae = res.data.userNmae;
        localStorage.headPortrait = res.data.headPortrait;
        localStorage.userNickname = res.data.userNickname;
        localStorage.secretKeytoken = res.data.secretKeytoken;
        localStorage.rolemanagement = res.data.RoleOfTheMenu;
        localStorage.index = res.data.index;
        localStorage.logo = res.data.logo; // 网页的logo
        localStorage.dapang = res.data.dapang;
        localStorage.Userid = res.data.id; // userid
        localStorage.usertype = res.data.usertype;
        store.commit("setrolemanagement", res.data.RoleOfTheMenu);
        store.commit("setrolemanagement", res.data.RoleOfTheMenu);
        localStorage.CharacterNameCode = res.data.CharacterNameCode
        localStorage.accountType = res.data.accountType 
        store.state.accountType = res.data.accountType 
        // dxPeer.commit("initPeerJs", localStorage.userNmae);
        if (res.data.accountType == 2) {
            hf('leadingEnd')
            return
        }
        if (qurl.url) {
            hf(qurl.url, {});
        } else {
            hf("/", {});
        }
    }
};
const handleValidateClick = (e) => {
    formRef.value.validate((errors) => {
        if (!errors) {
            loading();
        } else {
            console.log(errors);
        }
    });
};
</script>
<style scoped>
.loading-page {
    height: 100vh;
    background: #181C1F;
}

.loading-left {
    background: #191C1F;
}

.loading-left-img {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.loading-centext {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.7);
    width: 500px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px 40px;
}
</style>